<template>
  <div class="basic-container">
    <header v-if="pageTitle" class="basic-container__header">
      <div v-if="back" class="back-button" @click="router.go(-1)">
        <el-icon :size="20" class="font-bold" color="#595E70"><back /></el-icon>
        <span class="whitespace-nowrap text-[#454954] font-normal">返回</span>
        <el-divider direction="vertical" />
      </div>
      <span class="whitespace-nowrap font-semibold">{{ pageTitle }}</span>
      <span v-if="subTitle" class="whitespace-nowrap ml-2">
        <text-ell :content="subTitle" />
      </span>
    </header>

    <div class="basic-container__main">
      <div v-if="slots.header" class="header">
        <slot name="header"></slot>
      </div>

      <header v-if="slots.filter" :class="filterClass" class="filter-wrapper">
        <slot name="filter"></slot>
      </header>

      <main
        class="content-wrapper"
        :class="[
          { 'is-custom': !!customContent, 'transparent-bg': transparent },
          isString(customContent) ? customContent : ''
        ]"
      >
        <slot></slot>
      </main>

      <footer v-if="slots.footer" class="footer-wrapper">
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Back } from '@element-plus/icons-vue'
import { isString } from 'lodash-es'

interface IProps {
  pageTitle?: string
  subTitle?: string
  back?: boolean
  filterClass?: string
  customContent?: boolean | string
  transparent?: boolean
}

withDefaults(defineProps<IProps>(), {
  pageTitle: '',
  filterClass: '',
  customContent: false,
  transparent: false
})
const slots = useSlots()
const router = useRouter()
</script>

<style scoped lang="scss">
.basic-container {
  @apply flex flex-col h-full overflow-hidden p-4 pt-0;
  background: #f7f8fa;
  &__header {
    @apply flex items-center text-base font-medium text-black;
    height: 54px;
    .back-button {
      @apply flex items-center gap-x-2 cursor-pointer;
    }
  }
  &__main {
    @apply flex flex-col flex-1 overflow-hidden;
    .content-wrapper {
      @apply flex-1 overflow-hidden bg-white rounded-t-lg px-4 pt-4;
      &.is-custom {
        @apply flex flex-col pt-0 rounded-lg;
        &.transparent-bg {
          @apply bg-transparent;
        }
      }
    }
    .header {
      @apply mb-4;
    }
    .filter-wrapper {
      @apply overflow-hidden bg-white rounded-t-lg p-4;
      & + .content-wrapper {
        @apply rounded-none mt-0;
      }
    }
    .footer-wrapper {
      @apply h-16 bg-white rounded-b-lg px-4 pl-[40px] flex items-center;
    }
  }
}
</style>
